<template>
	<view class="index-container">
		<view class="titleStyPOs">
			<div :style="{height: statusBarHeight + 'px'}"></div>
			<Title :title="title" />
			<view class="flex-start mt-50" v-if="isShop == 0">
				<view class="ml-35 commonSty" :class="{ activeSty: current == index }"
					v-for="(item, index) in listTitle" @click="changeTitle(index)">
					{{ item }}
				</view>
			</view>
			<view class="flex w-full">
				<view style="position: relative; flex:1">
					<u-search :placeholder="$t('请搜索')" :showAction="true" :animation="false" bgColor="#fff" v-model="keyword"
						class="searchSty" @search="goFilter" @custom="goFilter"></u-search>
				</view>
				<view v-if="current == 0" class="transport">
					<view class="transport_name">
						<city :value="paramsCaigou.city_name" class="w-full" @change="e => {
							paramsCaigou.city_name = e.column2.value == -1 || e.column3.value == -1 ?
								[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
								e.column3.label;
							paramsCaigou.city_id = e.column3.value;
						}">
							                                    <div class="h-full flex fz26 ml-5 w-full"              
								                          :class="{ 'font-bold': paramsCaigou.city_name }"              
								                         
								:style="{ color: paramsCaigou.city_name ? '#333' : '#8c8c8c' }">
								                                        {{ paramsCaigou.city_name || $t('请选择') }}
								                                    </div>
							                                </city>
					</view>
					<u-icon v-if="paramsCaigou.city_id" name="close" color="#8C8C8C" size="24rpx" class="ml-10" @click="delAddressCaigou"></u-icon>
					<u-icon name="arrow-down" color="#8C8C8C" size="24rpx" class="ml-10"></u-icon>
				</view>
				<view v-if="current == 1" class="transport">
					<view class="transport_name">
						<city :value="paramsList.city_name" class="w-full" @change="e => {
							paramsList.city_name = e.column2.value == -1 || e.column3.value == -1 ?
								[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
								e.column3.label;
							paramsList.area_id = e.column3.value;
						}">
							<div class="h-full flex fz26 ml-5 w-full" :class="{ 'font-bold': paramsList.city_name }"
								:style="{ color: paramsList.city_name ? '#333' : '#8c8c8c' }">
								{{ paramsList.city_name || $t('请选择') }}
							</div>
						</city>
					</view>
					<u-icon v-if="paramsList.area_id" name="close" color="#8C8C8C" size="24rpx" class="ml-10" @click="delAddress"></u-icon>
					<u-icon name="arrow-down" color="#8C8C8C" size="24rpx" class="ml-10"></u-icon>
				</view>
			</view>
		</view>

		<!-- <view style="height: 400rpx;"></view> -->

		<view v-if="current == 0" class="">
			<view class=" infoBoxSty pb-24" v-for="(item, index) in storeList" @click="goToCaigoDetail(item)">
				<view class="flex">
					<image :src="getImageUrl(item.avatar)" mode="aspectFill" class="w-90 h-90 mt-10 ml-24 mb-10"
						style="border-radius: 500rpx;"></image>
					<view class="flex-1">
						<p class="ml-20 mr-20 fz28 mt-24 text-010 font-bold">{{ item.username }}</p>
						<view class="flex-start ml-24">
							<view class="" v-for="(it, ind) in scoreList">
								<image v-if="it.num <= item.user_info.rating" class="w-20 h-20 ml-5"
									src="/static/img/starBright.png"></image>
								<image v-else class="w-20 h-20 ml-5" src="/static/img/starDark.png"></image>
							</view>
								<span class="fz20 text-888 ml-10 mt-10">{{$t('综合评分')}}: {{ get(item,
									'user_info.rating') }}</span>
						</view>
						<!-- <view class="flex-start ml-20 mt-15">
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<span class="fz20 text-888 ml-10" style="margin-top: -5rpx;">{{$t('综合评分')}}: {{ get(item,
								'user_info.rating') }}</span>
						</view> -->
						<view class="flex-start mt-15 mb-24">
							<flag class="mr-6 ml-20 mt-5" :country="get(item, 'user_info.country')" />
							<p class="fz20 text-888 ml-10">{{ get(item, 'area.mergename') }}</p>
						</view>
					</view>
				</view>
				<view class="infoMainSty">
					<image v-if="item.level == 0" src="../../static/icon/goldIcon (2).png" mode="widthFix" class="w-120 ml-16"></image>
					<image v-else-if="item.level == 1" src="../../static/img/whiteGoldBusi.png" mode="widthFix" class="w-120 ml-16"></image>
					<image v-else-if="item.level == 2" src="../../static/icon/zuanshiIcon.png" mode="widthFix" class="w-120 ml-16"></image>
					<p class="ml-15 mr-20 jsscak">{{$t('采购范围')}} : {{ item.category_name || $t('暂无') }} </p>
				</view>
			</view>

			<view class="h-30"></view>
			<view v-if="nomoreCaigo" class="center text-gray-500 fz24 pt-20 pb-20" style="margin-bottom: 30rpx;">
				{{$t('没有更多了')}}
			</view>
		</view>
		<view v-if="current == 1" class="">
			<view class=" infoBoxSty" v-for="(item, index) in supplierList" @click="goTogyDetail(item)">
				<view class="flex">
					<image :src="getImageUrl(item.logo)" mode="aspectFill" class="w-90 h-90 mt-10 ml-24 mb-10"
						style="border-radius: 500rpx;"></image>
					<view class="flex-1">
						<p class="ml-20 mr-20 fz28 mt-24 text-010 font-bold">{{ item.name }}</p>
						<view class="flex-start ml-24">
							<view class="" v-for="(it, ind) in scoreList">
								<image v-if="it.num <= item.comment_score" class="w-20 h-20 ml-5"
									src="/static/img/starBright.png"></image>
								<image v-else class="w-20 h-20 ml-5" src="/static/img/starDark.png"></image>
							</view> 
								<span class="fz20 text-888 ml-10 mt-10">{{$t('综合评分')}}: {{ item.comment_score }}</span>
						</view>
						<!-- <view class="flex-start ml-20 mt-15">
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
							<span class="fz20 text-888 ml-10" style="margin-top: -5rpx;">{{$t('综合评分')}}: {{ item.comment_score
								}}</span>
						</view> -->
						<view class="flex-start mt-15 mb-24">
							<flag class="mr-6 ml-20 mt-5" :country="item.country" />
							<!-- <image v-if="item.country == 0" src="@/static/icon/zh.png" mode="" class="ml-20 w-30 h-20">
							</image>
							<image v-else src="@/static/icon/ru.png" mode="" class="ml-20 w-30 h-20"></image> -->
							<p class="fz20 text-888 ml-10 mr-24">{{ item.company_address || $t('暂无') }}</p>
						</view>
					</view>
				</view>
				<view class="infoMainSty">
					<image v-if="item.isvip == 0" src="../../static/icon/goldIcon (2).png" mode="widthFix" class="w-120 ml-16"></image>
					<image v-else-if="item.isvip == 1" src="../../static/img/whiteGoldBusi.png" mode="widthFix" class="w-120 ml-16"></image>
					<image v-else-if="item.isvip == 2" src="../../static/icon/zuanshiIcon.png" mode="widthFix" class="w-120 ml-16"></image>
					<p class="ml-15 mr-24 jsscak">{{$t('主营范围')}} : {{ item.desc || $t('暂无') }} </p>
				</view>
				<view v-if="item.prolist.length > 0" class="flex ml-15 mt-24 pb-24">
					<view class="" v-for="img in item.prolist">
						<image :src="getImageUrl(img.pic)" mode="aspectFill" class="w-155 h-155 ml-10"></image>
					</view>
				</view>
			</view>

			<view class="h-30"></view>
			<view v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20" style="margin-bottom: 30rpx;">
				{{$t('没有更多了')}}
			</view>
			<!-- <u-empty v-if="nomore" textSize="28rpx" iconSize="100rpx" :text="$t('没有更多了')"></u-empty> -->
		</view>
	</view>
</template>

<script>
import {
	getBlist
} from '@/api/app.js'
import { searchCaigouUser } from '@/api/basic.js'
import Title from './components/title.vue'
export default {
	components: {
		Title
	},

	data() {
		return {
			listTitle: [this.$t('采购商'), this.$t('供应商')],
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			current: 0,
			keyword: '',
			title: this.$t('优质货主'),
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
			storeList: [],
			scoreList: [{
				num: 1
			},
			{
				num: 2
			},
			{
				num: 3
			},
			{
				num: 4
			},
			{
				num: 5
			},
			],
			paramsCaigou: {
				page: 1,
				limit: 10,
				keyword: '',
				city_id: '',
				city_name: ''
			},
			paramsList: {
				pagenum: 1,
				limit: 10,
				aid: 1,
				keyword: '',
				area_id: '',
				city_name: ''
			},
			supplierList: [],
			nomore: false,
			nomoreCaigo: false,
			isShop: 0, // 1 从商城过来的 0 其他 
		}
	},
	watch: {
		'paramsList.area_id': {
			handler(val) {
				console.log(this.paramsList.area_id)
				this.getBlist(true)
			}
		},
		'paramsCaigou.city_id': {
			handler(val) {
				console.log(this.paramsCaigou.city_id)
				this.searchCaigouUser(true)
			}
		}
	},
	mounted() {
		this.searchCaigouUser(true)
	},
	onLoad(options) {
		this.isShop = options.isShop || 0;
		this.current = this.isShop;
		if (this.isShop == 1) {
			this.getBlist(true)
		}
	},
	methods: {
		getImageUrl(url = '') {
				console.log(url)
				if(url.indexOf('://') > -1) {
					return url
				} else {
					return this.IMAGE_URL + url
				}
			},
		delAddress() {
			this.paramsList.area_id = ''
			this.paramsList.city_name = ''
			this.getBlist(true)
		},
		delAddressCaigou() {
			this.paramsCaigou.city_id = ''
			this.paramsCaigou.city_name = ''
			this.searchCaigouUser(true)
		},
		changeTitle(index) {
			this.current = index
			if (index == 1) {
				this.getBlist(true)
			} else if (index == 0) {
				this.searchCaigouUser(true)
			}
		},
		goToCaigoDetail(info) {
			console.log('info---', info)
			uni.navigateTo({
				url: `/pages/myPersonPage/index?targetUserId=${info.id}`
			})
		},
		goTogyDetail(info) {
			uni.navigateTo({
				url: `/pages/details/merchantDetail?bid=${info.id}`,
				webview: 'zWebViewShop'
			})
		},
		searchCaigouUser(init) {
			uni.showLoading({
				title: '加载中'
			});
			if (init) {
				this.paramsCaigou.page = 1
				this.nomoreCaigo = false;
			}
			searchCaigouUser({ ...this.paramsCaigou }).then(res => {
				console.log('res----', res)
				if (res.data.code == 200) {
					if (this.paramsCaigou.page == 1) {
						this.storeList = res.data.data.data.list || []
					} else {
						this.storeList = [...this.storeList, ...res.data.data.data.list]
					}
					console.log('this.storeList', this.storeList)
					//{{$t('当前')}}请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}{{$t('没有更多了')}}
					if (this.get(res, 'data.data.data.list').length == 0 || this.get(res, 'data.data.data.list').length < 10) {
						console.log('nomoreCaigo----')
						this.nomoreCaigo = true;
					}
				}
				uni.hideLoading()
			})
		},
		//上拉加载
		onReachBottom() {
			if (this.current == 1) {
				this.paramsList.pagenum++
				this.getBlist()
			} else {
				this.paramsCaigou.page++
				this.searchCaigouUser()
			}
		},
		goFilter(e) {
			if (this.current == 0) {
				console.log('222eeeeee', e)
				this.paramsCaigou.keyword = e
				this.searchCaigouUser(true)
			} else {
				console.log('222eeeeee', e)
				this.paramsList.keyword = e
				this.getBlist(true)
			}
		},
		getBlist(init) {
			uni.showLoading({
				title: '加载中'
			});
			if (init) {
				this.paramsList.pagenum = 1
				this.nomore = false;
			}
			getBlist({ ...this.paramsList }).then(res => {
				console.log('res----', res)
				if (res.data.code == 1) {
					if (this.paramsList.pagenum == 1) {
						this.supplierList = res.data.data || []
					} else {
						this.supplierList = [...this.supplierList, ...res.data.data]
					}
					console.log('this.supplierList00', this.supplierList)
					//{{$t('当前')}}请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}{{$t('没有更多了')}}
					if (this.get(res, 'data.data').length == 0 || this.get(res, 'data.data').length < 10) {
						this.nomore = true;
					}
				}
				uni.hideLoading()
			})
		}
	}

}
</script>

<style lang="scss">
page {
	background: #F6F7FB;
}

.index-container {
	width: 100%;
	height: 100%;
	z-index: 60;
	// overflow: scroll;

	/deep/ .u-checkbox {
		width: 100% !important;
	}

	/deep/ .u-checkbox__label {
		width: 100% !important;
	}
}

.titleStyPOs {
	background: #F6F7FB url("/static/backcolorImg.png") no-repeat top / 100%;
	position: sticky;
	width: 100%;
	z-index: 10;
	top: 0;
}

.commonSty {
	color: #979CAA;
	font-family: PingFang SC;
	font-size: 32rpx;
	line-height: 32rpx;
	letter-spacing: 0px;
	height: 60rpx;
}

.activeSty {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 50rpx;
	letter-spacing: 0px;
	color: #000;
	border-bottom: 5rpx solid #4BB0FF;
}

.searchSty {
	// width: 65% !important;
	flex: 1;
	// display: flex;
	margin-left: 26rpx !important;
	margin-top: 26rpx !important;
	margin-bottom: 30rpx !important;

	/deep/ .u-search__content {
		background-color: #fff !important;
		height: 78rpx !important;
		// position: relative;
		// z-index: 2;
	}

	/deep/ .u-input {
		background-color: #fff !important;
	}

	/deep/ .u-icon__icon {
		font-size: 46rpx !important;
		color: #74C2FF !important;
	}

	/deep/ .u-action {
		width: 110rpx !important;
		height: 50rpx !important;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%) !important;
		text-align: center;
		line-height: 50rpx;
		font-family: PingFang SC;
		color: #fff;
		font-weight: 500;
		font-size: 26rpx;
		letter-spacing: 0px;
		border-radius: 500rpx;
		position: absolute;
		z-index: 10;
		right: 20rpx;
	}

	/deep/ .u-search__action {
		width: 110rpx;
		height: 50rpx;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		line-height: 50rpx;
		letter-spacing: 0px;
		color: #fff;
		position: absolute;
		z-index: 10;
		right: 16rpx;
	}
}

.transport {
	min-width: 135rpx;
	// margin-left: 16rpx;
	display: flex;
	align-items: center;
}

.infoBoxSty {
	background-color: #fff;
	margin-left: 24rpx;
	margin-right: 24rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
	padding-bottom: 24rpx;
}

.infoMainSty {
	min-height: 54rpx;
	margin-left: 24rpx;
	margin-right: 24rpx;
	background-color: #FFF7EC;
	border-radius: 8rpx;
	// line-height: 54rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	p {
		font-size: 20rpx;
		color: #D58349;
	}
}
.jsscak {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}
</style>
